<template>
  <div>
    <el-row class="utils" v-if="!title.includes('详情')">
      <el-col :span="24" align="right">
        <el-button type="primary" @click="handleAdd()">添加</el-button>
      </el-col>
    </el-row>
    <el-table :data="store.state.projectCenter.form.projectParticipantsList" style="width: 100%">
      <el-table-column type="index" label="序号" width="50" />
      <el-table-column prop="ranking" label="排名" width="80" />
      <el-table-column prop="participationType" :formatter="formatter" label="参与类型" />
      <el-table-column prop="unitName" label="单位名称" />
      <el-table-column prop="leader" label="负责人" />
      <el-table-column prop="workAllocation" label="分工" />
      <el-table-column fixed="right" label="操作" v-if="!title.includes('详情')">
        <template #default="scope">
          <el-button @click="handleDel(scope.$index)" type="danger" link size="small"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      v-model="addDialog"
      append-to-body
      width="50%"
      top="10vh"
      title="添加单位"
      @close="handleClose"
    >
      <el-form
        ref="unitsForm"
        :model="form"
        label-position="left"
        label-width="90px"
        :inline="true"
        :rules="rules"
        class="demo-form-inline"
      >
        <el-form-item label="排名:" required prop="ranking">
          <el-input
            v-model="form.ranking"
            maxlength="4"
            type="text"
            show-word-limit
            @input="form.ranking = form.ranking.replace(/^(0+)|[^\d]+/g, '')"
            placeholder="请输入"
          />
        </el-form-item>
        <el-form-item label="参与类型:" required prop="participationTypeName">
          <selectOptionDick
            v-model="form.participationType"
            :options="store.state.projectCenter.projectDict.XMZX_PATICIPATION_TYPE"
            @changeValue="getParticipationType"
          ></selectOptionDick>
        </el-form-item>
        <el-form-item label="单位名称:" required prop="unitName">
          <popup-tree-input
            :props="data.deptTreeProps"
            placeholder="选择单位"
            :data="store.state.projectCenter.orgList"
            :prop="form.unitName"
            :current-change-handle="getUnitId"
          />
        </el-form-item>
        <el-form-item label="负责人:" required prop="leaderId">
          <user-list-modal
            v-model="form.leaderInfo"
            :default-users="[]"
            :multiple="false"
            :devType="'platform'"
          />
        </el-form-item>
        <el-form-item label="分工:" style="width: 100%">
          <el-input v-model="form.workAllocation" maxlength="100" show-word-limit :rows="3" type="textarea" placeholder="请输入" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addDialog = false">关闭</el-button>
          <el-button type="primary" @click="save()">保存</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import UserListModal from '@/views/project/components/UserListModal/index.vue'
import selectOptionDick from '@/views/project/components/selectOptionDick/index.vue'
import PopupTreeInput from '@/views/project/components/PopupTreeInput/index.vue'
import { defineComponent, reactive, ref, watch } from 'vue'
import { useStore } from 'vuex'
import { ergodicDickName } from '@/utils/utils'

export default defineComponent({
  props: {
    title: {
      type: String,
      default:''
    },
  },
  components: { PopupTreeInput, selectOptionDick, UserListModal },
  setup() {
    const data = reactive({
      deptTreeProps: {
        label: 'name',
        children: 'children',
      },
    })
    const store = useStore()
    let addDialog = ref(false)
    const form = reactive({
      ranking: '', //排名
      participationType: '', //参与类型val
      participationTypeName: '', //参与类型名
      unitName: '', //单位名称
      unitId: '', //单位id
      leaderInfo: {} as any, //负责人姓名和id
      leader: '', //负责人
      leaderId: '', //负责人id
      workAllocation: '', //分工
    })
    const rules = reactive({
      ranking: { required: true, message: '该字段必填' },
      participationTypeName: { required: true, message: '该字段必填' },
      unitName: { required: true, message: '该字段必填' },
      leaderId: { required: true, message: '该字段必填' },
    })
    watch(
      () => form.leaderInfo,
      async (newVal) => {
        console.log(newVal, 'form.personInfo')
        form.leaderId = newVal.userId
        form.leader = `${newVal.cname}`
      }
    )
    const formatter = (row) => {
      if (Object.keys(store.state.projectCenter.projectDict).length != 0) {
        return ergodicDickName(
          row.participationType,
          store.state.projectCenter.projectDict.XMZX_PATICIPATION_TYPE
        )
      }
    }
    const getParticipationType = (item) => {
      console.log(item, 'getParticipationType')
      form.participationType = item.itemValue
      form.participationTypeName = item.itemText
    }
    const getUnitId = (item) => {
      console.log(item, 'item')

      form.unitId = item.id
      form.unitName = item.name
      console.log(form.unitId, form.unitName)
    }
    const getLeaderId = (item) => {
      console.log(item, 'getParticipationType')
      form.leaderId = item.userId
      form.leader = item.username
    }
    const handleAdd = () => {
      addDialog.value = true
      for (let key in form) {
        form[key] = ''
      }
    }
    const handleDel = (index) => {
      console.log(index)
      store.state.projectCenter.form.projectParticipantsList.splice(index, 1)
    }

    //表单验证
    const unitsForm = ref()
    const handleClose = () => {
      unitsForm.value.resetFields()
    }
    const save = async () => {
      await unitsForm.value.validate((valid, fields) => {
        if (valid) {
          console.log('submit!')
          addDialog.value = false
          store.state.projectCenter.form.projectParticipantsList.push({ ...form })
          unitsForm.value.resetFields()
        } else {
          console.log('error submit!', fields)
        }
      })
    }
    return {
      data,
      addDialog,
      form,
      rules,
      store,
      unitsForm,
      formatter,
      getParticipationType,
      getUnitId,
      getLeaderId,
      handleAdd,
      handleDel,
      handleClose,
      save,
    }
  },
})
</script>

<style scoped>
.utils {
  margin: 10px 20px;
}
.demo-form-inline .el-form-item {
  width: 45%;
}
:deep(.el-dialog__body) {
  display: block;
  padding: 10px 20px;
}
.el-select {
  width: 100%;
  margin: 0;
}
:deep(.el-table__fixed-right) {
  height: 100% !important;
}
</style>
